/*
 * @Author: yixin 
 * @Date: 2019-11-25 09:55:18 
 * @Last Modified by: yixin
 * @Last Modified time: 2020-05-08 16:44:32
 * 油耗统计
 */

import React, { PureComponent } from "react"
import { withRouter } from "react-router"
import styles from './totalOil.less'
import Time from '@/components/time'
import Header from '@/components/header'
import { segmentOil, equipOil } from '@/services'
import Bar from '@/components/bar'
import Pie from '@/components/pie'
import { formatDate, getChartColor } from '@/utils'
import md5 from 'js-md5';
class TotalOil extends PureComponent {

  constructor(props){
    super(props);
  }

  componentDidMount(){
    this.renderPie();
    this.renderBar();
  }

  renderPie = async () => {
    try {
      const { worktime } = this.props.location.state
      const data = await segmentOil({ beginDate: worktime.beginDate, endDate: worktime.endDate })
      if(data.code === 200){
        let series = [
          { name: '行驶', value: data.data.driveOil, itemStyle: { color: getChartColor['行驶'] } },
          { name: '驻车', value: data.data.parkOil, itemStyle: { color: getChartColor['驻车'] } },
          { name: '泵送', value: data.data.pumpOil, itemStyle: { color: getChartColor['泵送'] } },
          { name: '转场', value: data.data.switchOil, itemStyle: { color: getChartColor['转场'] } },
          { name: '待料', value: data.data.awaitOil, itemStyle: { color: getChartColor['待料'] } }
        ];
        this.pie.init([
          { data: [{ name: '总油耗', value: data.data.driveOil+data.data.parkOil+data.data.pumpOil+data.data.switchOil+data.data.awaitOil }] },
          { data: series }
        ])
      }
    } catch (error) {
      console.log(error)
    }
  }

  renderBar = async () => {
    try {
      const { worktime } = this.props.location.state
      const data= await equipOil({ beginDate: worktime.beginDate, endDate: worktime.endDate })
      if(data.code === 200){
        let categories = [];
        let series = []
        categories.push(data.data.profess.name);
        series.push({value: data.data.profess.oil, itemStyle: { color: '#FB4033' }});
        data.data.list.map((item)=>{
          categories.push(item.name);
          series.push(item.oil);
        })
        this.bar && this.bar.init(categories, series)
      }
    } catch (error) {
      console.log(error)
    }
  }

  toPage = ({equipCode}) => {
    this.props.history.push(`carDetail?equipCode=${equipCode}&source=selfpage&token=${md5(equipCode+'selfpage'+'s$31d0dl1!~93-kHj^S')}`, { worktime: this.props.location.state.worktime })
  }
  
  render(){
    const { worktime } = this.props.location.state
    return (
      <div >
        <Header>油耗分析</Header>
        <Time time={worktime.beginDate===worktime.endDate ? worktime.beginDate : `${worktime.beginDate}/${worktime.endDate}`} />
        <Pie ref={el=>{ this.pie = el }} unit="L" />
        <div className={styles.separator}></div>
        <Bar ref={el=>{ this.bar = el }} toPage={this.toPage} unit="L" />
      </div>
    ) 
  }
}
export default withRouter(TotalOil)
